<!-- 商品评论列表组件 -->
<template>
  <div class="review-container">
  
    <!-- 评论列表容器 -->
    <div class="review-list">
      <!-- 遍历评论数据，生成评论卡片 -->
      <div v-for="(review, index) in reviewList" :key="index" class="review-card">
        <!-- 评论头部：用户信息和评分 -->
        <div class="review-header">
          <!-- 用户信息区域 -->
          <div class="user-info">
            <!-- 用户头像：显示用户名首字母 -->
            <el-avatar :size="40" class="user-avatar">
              {{ getUserInitial(review) }}
            </el-avatar>
            <!-- 用户详细信息 -->
            <div class="user-details">
              <span class="username">{{ review.userName || '匿名用户' }}</span>
              <span class="review-time">{{ formatDate(review.createTime) }}</span>
            </div>
          </div>
          <!-- 评分显示区域 -->
          <div class="review-rating">
            <el-rate
              v-model="review.rating"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}分"
            />
          </div>
        </div>
        
        <!-- 评论内容区域 -->
        <div class="review-content">
          <!-- 评论文字内容 -->
          <p class="review-text">{{ review.content || '暂无评论内容' }}</p>
          <!-- 评论图片区域 -->
          <div v-if="review.imageUrls" class="review-images">
            <el-image
              v-for="(img, imgIndex) in getImageArray(review.imageUrls)"
              :key="imgIndex"
              :src="fileBaseUrl() + img"
              :preview-src-list="getPreviewList(review.imageUrls)"
              :initial-index="imgIndex"
              fit="cover"
              class="review-image"
              :preview-teleported="true"
            />
          </div>
        </div>
      </div>
      <!-- 无评论时显示提示 -->
      <div v-if="!reviewList || reviewList.length === 0" class="no-review">
        暂无评论
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
import {fileBaseUrl} from '@/apis/files'

// 定义组件属性
const props = defineProps({
  productId: {
    type: String,
    required: true
  }
})

// 响应式数据
const reviewList = ref([])


/**
 * 获取用户名的首字母
 * @param {Object} review - 评论对象
 * @returns {string} 用户名的首字母或默认字符
 */
const getUserInitial = (review) => {
  if (!review || !review.userName) return '?'
  return review.userName.charAt(0).toUpperCase()
}

/**
 * 获取商品评论列表
 * @param {string} productId - 商品ID
 */
const findSearch = async (productId) => {
  if (!productId) return
  try {
    const url = `review/product/${productId}`
    const res = await request.get(url)
    if (res.code === '0') {
      reviewList.value = Array.isArray(res.data) ? res.data : []
      console.log('评论列表数据:', reviewList.value)
    } else {
      reviewList.value = []
      ElMessage.error(res.msg)
    }
  } catch (error) {
    console.error('获取评论列表失败:', error)
    reviewList.value = []
    ElMessage.error('获取评论列表失败')
  }
}

// 监听 productId 的变化
watch(
  () => props.productId,
  (newProductId) => {
    if (newProductId) {
      console.log('productId 变化，新值:', newProductId)
      findSearch(newProductId)
    }
  },
  { immediate: true }
)

/**
 * 格式化日期时间
 * @param {string} dateString - ISO格式的日期字符串
 * @returns {string} 格式化后的中文日期时间字符串
 */
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

/**
 * 将逗号分隔的图片URL字符串转换为数组
 * @param {string} imageUrls - 逗号分隔的图片URL字符串
 * @returns {Array} 图片URL数组
 */
const getImageArray = (imageUrls) => {
  if (!imageUrls) return []
  return imageUrls.split(',')
}

/**
 * 获取预览图片列表
 * @param {string} imageUrls - 逗号分隔的图片URL字符串
 * @returns {Array} 完整的预览图片URL数组
 */
const getPreviewList = (imageUrls) => {
  if (!imageUrls) return []
  return imageUrls.split(',').map(img => fileBaseUrl() + img)
}
</script>

<style scoped>
/* 评论容器样式 */
.review-container {
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

/* 评论列表样式 */
.review-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 评论卡片样式 */
.review-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 评论卡片悬停效果 */
.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* 评论头部样式 */
.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

/* 用户信息区域样式 */
.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 用户头像样式 */
.user-avatar {
  background-color: #409EFF;
  color: white;
  font-weight: bold;
}

/* 用户详细信息样式 */
.user-details {
  display: flex;
  flex-direction: column;
}

/* 用户名样式 */
.username {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* 评论时间样式 */
.review-time {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

/* 评论内容区域样式 */
.review-content {
  margin-top: 10px;
}

/* 评论文字样式 */
.review-text {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 15px;
}

/* 评论图片容器样式 */
.review-images {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* 评论图片样式 */
.review-image {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 评论图片悬停效果 */
.review-image:hover {
  transform: scale(1.05);
}

/* 响应式布局样式 */
@media (max-width: 768px) {
  .review-container {
    padding: 0 15px;
  }
  
  .review-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .review-image {
    width: 100px;
    height: 100px;
  }
}

/* 无评论提示样式 */
.no-review {
  text-align: center;
  padding: 40px 0;
  color: #999;
  font-size: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  margin: 20px 0;
}
</style> 